<template>
  <div class="row" style="margin: 0 -10px">
    <div class="flex item" v-for="(item,value) in newHeadList" :key="value" :class="setCol()">
      <div>{{item}}：</div>
      <div v-if="isShowStatus(value)">
        <slot :name="value"></slot>
      </div>
      <div class="flex-1 text-ellipsis" v-else>{{detailData[value]  | toHorizontalLine}}
          <q-tooltip>{{detailData[value] | toHorizontalLine}}</q-tooltip>
      </div>
    </div>
    <slot></slot>
  </div>
</template>
<script>
import _ from 'lodash'
export default {
  name: 'detail-dialog',
  props: {
    headList: Object,
    detailData: Object,
    // 如果需要自定义slot则需要传入
    statusList: {
      type: Array,
      default () {
        return []
      }
    },
    colNumber: {
      type: Number,
      default: 4
    }
  },
  computed: {
    newHeadList () {
      return _.omitBy(this.headList, _.isNil)
    }
  },
  methods: {
    isShowStatus (val) {
      return this.statusList.includes(val)
    },
    setCol () {
      return `col-${this.colNumber}`
    }
  }
}
</script>

<style scoped lang="stylus">
  .item{
    line-height 1.5
    padding 0 10px
    margin-bottom 15px
  }
</style>
